<template>
    <div>
        <head-item :title="title"></head-item>
        <div style="height:500px" id="container" tabindex="0"></div>
    </div>
</template>

<script>
import HeadItem from '@/components/Head.vue';
import AMap from "AMap";
    export default {
        components:{
            HeadItem
        },
        data(){
            return {
                title:'个人中心'
            }
        },
        methods:{
            init(){
            let map = new AMap.Map('container', {
                center: [114.390524,30.502121],
                resizeEnable: true,
                zoom: 16,
            })
            AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
                map.addControl(new AMap.ToolBar())
                map.addControl(new AMap.Scale())
            });
            var marker = new AMap.Marker({
                position:new AMap.LngLat(114.390524,30.502121),
                title:'武汉工程大学'
            });
            map.add(marker);
            } 
        },
        mounted() {
            this.init();
        },
    }
</script>

<style lang="less" scoped>
@top:46px;
@bottom:50px;
    .page{
        padding-top: @top;
        padding-bottom: @bottom;
    }
</style>